<template>
  <div class="chooseIconModal">
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="992px"
      title=""
      wrapClassName="choose-icon-modal-container"
      @cancel="handleClose()"
    >
      <div class="choose-icon-modal-body">
        <!-- 标题 -->
        <div class="header">
          <div class="title">选择图标</div>
          <div class="close-btn" @click="handleClose()"></div>
        </div>
        <!-- 主体 -->
        <div class="body">
          <div class="upload-container">
            <a-upload
              name="file"
              :file-list="fileList"
              accept="image/*"
              :beforeUpload="
                (file) => {
                  return beforeUpload(file);
                }
              "
            >
              <a-button
                type="primary"
                icon="upload"
                class="chooseFile"
                :loading="loading"
              >
                点击上传
              </a-button>
            </a-upload>
          </div>
          <div class="list-warp">
            <div
              class="icon-item"
              :class="chooseIndex == index && 'active'"
              v-for="(item, index) in listData"
              :key="index"
              @click="chooseIcon(item, index)"
            >
              <!-- 删除按钮 -->
              <a-icon type="close-circle" @click.stop="handelDelete(item)" />
              <!-- 图片 -->
              <img :src="item.url" alt="" />
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="pager">
          <a-pagination
            v-model="pager.page"
            :total="pager.total"
            :page-size="pager.pageSize"
            :show-total="(total) => `共${total}条 `"
            @change="pageChange"
          />
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
//[弹窗]选择图标
import { axios } from "@/utils/request";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    image: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      chooseIndex: -1,
      fileList: [],
      listData: [],
      //分页
      pager: {
        page: 1,
        pageSize: 32,
        total: 0,
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
    },
  },
  mounted() {},
  methods: {
    getData() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        let { page, pageSize } = this.pager;
        axios
          .post(
            "/probusiness/lygPortIconLibrary/getPageSet",
            {
              pageNo: page,
              pageSize,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { totalCount, rows } = res;
            this.listData = rows;
            this.pager.total = totalCount;
          })
          .catch((_) => {
            this.listData = [];
            this.pager.total = 0;
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    pageChange(page, pageSize) {
      this.pager.page = page;
      this.pager.pageSize = pageSize;
      this.getData();
    },

    //选择图标
    chooseIcon(icon, index = 0) {
      this.chooseIndex = index;
      this.$emit("update:image", icon);
      this.$emit("change", icon);
      this.handleClose();
    },

    //监听文件选择
    beforeUpload(file) {
      this.upLoadFile({ file });
      return false;
    },

    //上传附件
    upLoadFile({ file, index }) {
      this.loading = true;
      let formData = new FormData();
      formData.append("bucket", "datav");
      formData.append("file", file);
      axios
        .post(`/document/minio/uploadfile`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          let { statusCode, dfsFileUuid, url } = res;
          if (statusCode == 200) {
            this.saveData({ dfsFileUuid, url });
          } else {
            this.$message.error("上传失败，请稍后重试~");
          }
        })
        .catch((_) => {
          this.loading = false;
          this.$message.error("上传失败，请稍后重试~");
        });
    },

    //保存附件
    saveData(data = {}) {
      let { dfsFileUuid, url } = data;
      axios
        .post(
          `/probusiness/lygPortIconLibrary/save`,
          { dfsFileUuid, url },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { statusCode } = res;
          if (statusCode == 200) {
            this.getData();
            this.$message.success("上传成功！");
          } else {
            this.$message.error("上传失败，请稍后重试~");
          }
        })
        .catch((_) => {
          this.$message.error("上传失败，请稍后重试~");
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    //删除属性
    handelDelete(item = {}) {
      let that = this;
      let { uuid } = item;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          return new Promise((resolve, reject) => {
            axios
              .post(
                `/probusiness/lygPortIconLibrary/deleteBatch?varchar=${uuid}`,
                {},
                {
                  headers: {
                    "Content-Type": "application/json",
                  },
                }
              )
              .then((res) => {
                let { statusCode } = res;
                if (statusCode == 200) {
                  that.getData();
                  that.$message.success("删除成功！");
                  resolve();
                } else {
                  that.$message.error("删除失败，请稍后重试~");
                  reject();
                }
              })
              .catch((_) => {
                that.$message.error("删除失败，请稍后重试~");
                reject();
              });
          }).catch(() => console.log("Oops errors!"));
        },
      });
    },

    //删除
    deleteData(data = {}) {
      let { uuid } = data;
      return new Promise((resolve, reject) => {});
    },

    //关闭
    handleClose() {
      this.chooseIndex = -1;
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.choose-icon-modal-container {
  .ant-modal-content {
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    .ant-modal-close {
      display: none;
    }
    .ant-modal-body {
      padding: 0 !important;
      .choose-icon-modal-body {
        height: 667px;
        background: rgba(1, 30, 38, 0.8);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid rgba(100, 193, 220, 0.6);
        border-radius: 0 8px 0 0;
        .header {
          height: 36px;
          flex-shrink: 0;
          background: linear-gradient(90deg, #00a7d8, rgba(0, 77, 99, 0));
          position: relative;
          &::before {
            content: "";
            display: flex;
            height: 40px;
            width: 300px;
            position: absolute;
            top: 0;
            left: 0;
            background: url("~@/assets/img/portalEntry/modal_icon_1.png");
            background-size: 100% 100%;
          }
          &::after {
            content: "";
            display: flex;
            height: 100%;
            width: 75px;
            position: absolute;
            top: -1px;
            right: -1px;
            background: url("~@/assets/img/portalEntry/modal_icon_2.png");
            background-size: 100% 100%;
          }
          .title {
            position: absolute;
            height: 100%;
            color: #fff;
            font-size: 16px;
            letter-spacing: 1px;
            line-height: 36px;
            padding-left: 12px;
            position: relative;
            &::before {
              content: "";
              position: absolute;
              height: 100%;
              width: 21px;
              background: url("~@/assets/img/portalEntry/modal_icon_3.png");
              background-size: 100% 100%;
              left: -1px;
              top: 0;
            }
          }
          .close-btn {
            position: absolute;
            width: 16px;
            height: 16px;
            background: url("~@/assets/img/portalEntry/modal_icon_4.png")
              no-repeat center center;
            background-size: 12px 12px;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 9;
          }
        }
        .body {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          box-sizing: border-box;
          padding: 0 22px;
          .upload-container {
            height: 82px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            button {
              &.chooseFile {
                background: rgba(0, 213, 255, 0.1) !important;
                border: 1px solid #00d5ff !important;
                color: #00d5ff;
              }
            }
          }
          .list-warp {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            .icon-item {
              cursor: pointer;
              width: 104px;
              height: 104px;
              background: rgba(0, 213, 255, 0.1);
              border-radius: 6px;
              margin-left: 16px;
              margin-bottom: 16px;
              transition: 0.3s;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
              }
              &:nth-child(8n + 1) {
                margin: 0;
              }
              &:hover {
                background: rgba(0, 213, 255, 0.3);
                &:not(.active) {
                  .anticon-close-circle {
                    visibility: visible;
                  }
                }
              }
              &.active {
                border: 1px solid #00d5ff;
              }
              .anticon-close-circle {
                color: red;
                position: absolute;
                cursor: pointer;
                top: 8px;
                right: 8px;
                visibility: hidden;
              }
            }
          }
        }
        .pager {
          height: 82px;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 0 24px;
          box-sizing: border-box;
          .ant-pagination {
            .ant-pagination-total-text {
              color: #b8f3ff;
            }
            .ant-pagination-item {
              height: 24px;
              line-height: 22px;
              border-radius: 4px !important;
              min-width: 24px;
              border-color: #b8f3ff;
              background: transparent;
              a {
                color: #b8f3ff;
              }
              &.ant-pagination-item-active {
                border-color: #00d5ff;
                a {
                  color: #00d5ff;
                }
              }
            }
            .ant-pagination-item-ellipsis {
              color: #b8f3ff;
            }
            .ant-pagination-prev,
            .ant-pagination-next {
              width: 24px;
              height: 24px;
              line-height: 24px;
              min-width: auto;
              .ant-pagination-item-link {
                border-color: #b8f3ff;
                background: transparent;
                color: #b8f3ff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
